<template>
  <div class="fileBox" v-if="data && typeof data === 'object'">
    <div class="fileBox-img" :style="{
      background: fileSet(data[file.fileType])?.color || '#999aaa'
    }">
      <i class="iconfont" :class="fileSet(data[file.fileType])?.icon || 'icon-unknown'"></i>
    </div>
    <div class="fileBox-text">
      <div class="fileBox-title">{{ data[file.fileName] || '文件名称' }}</div>
      <div class="fileBox-tag">
        <span>{{ fileType(data[file.fileType]) || '类型' }}</span>
        <el-divider direction="vertical" />
        <span>{{ fileSize(data[file.fileSize]) || '大小' }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;
    file?: any;
    placement?: string;
  }>(),
  {
    file: {
      fileType: 'fileType', // 文件类型（文件后缀名）
      fileSize: 'fileSize', // 文件大小，单位：MB
      fileName: 'fileName', // 上传文件名
      fileUrl: 'res.fileUrl', // 上传文件路径（相对路径）
    },
  },
);
const fileObj: any = {
  'doc': { color: '#185abd', icon: 'icon-word' }, // Word 文档
  'docx': { color: '#185abd', icon: 'icon-word' },
  'xls': { color: '#217346', icon: 'icon-excel' }, // Excel 表格
  'xlsx': { color: '#217346', icon: 'icon-excel' },
  'ppt': { color: '#b7410e', icon: ' icon-ppt' }, // PPT 演示文稿
  'pptx': { color: '#b7410e', icon: ' icon-ppt' },
  'pdf': { color: '#d32f2e', icon: 'icon-pdf' }, // PDF 文件
  'txt': { color: '#f0ad4e', icon: 'icon-text' }, // 文本文件
  'jpg': { color: '#cb4c3e', icon: 'icon-image' }, // 图片文件
  'jpeg': { color: '#cb4c3e', icon: 'icon-image' },
  'png': { color: '#cb4c3e', icon: 'icon-image' },
  'zip': { color: '#006bb6', icon: 'icon-zip' }, // 压缩文件
  'rar': { color: '#006bb6', icon: 'icon-zip' },
}

const fileSet = (fileName: string) => {
  let _fileType: string = fileType(fileName)
  return fileObj[_fileType]
}
const fileType = (fileName: string): string => {
  return fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
}
const fileSize = (bytes: number): string => {
  const units = ['KB', 'MB', 'GB', 'TB'];
  if (bytes < 1) return '0 B';

  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  const value = bytes / Math.pow(1024, i);

  return `${value.toFixed(value < 10 ? 2 : 0)} ${units[i]}`;
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'copyBtn'): void;
}>();
</script>
<style scoped lang="scss">
.fileBox {
  &:not(:last-child) {
    margin-bottom: 8px;
  }

  padding: 8px;
  width: 100%;
  background: $hover;
  display: flex;
  align-items: center;

  >* {
    &:not(:last-child) {
      margin-right: 8px;
    }
  }

  .fileBox-img {
    --w: 40px;
    width: var(--w);
    height: var(--w);
    background: $info;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    overflow: hidden;

    .iconfont {
      font-size: 20px;
    }
  }

  .fileBox-text {
    float: 1;
    overflow: hidden;
    line-height: 1.2em;

    .fileBox-title {
      color: #000;
    }

    .fileBox-tag {
      color: $info;

      >* {
        &:not(:last-child) {
          margin-right: 8px;
        }
      }
    }

    >* {
      &:not(:last-child) {
        margin-bottom: 4px;
      }
    }
  }
}
</style>
